<template>
    <div class="">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            <div class="card">
                <el-card class="box-card">
                    <el-row>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">
                                <el-input placeholder="请输入内容" class="input-with-select" width="180px" v-model="queryInfo.query" clearable @clear="getMenuList">
                                    <el-button slot="append" icon="el-icon-search" @click="getMenuList">
                                    </el-button>
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="3">
                                <div class="grid-content">
                                    <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
                                </div>
                        </el-col>
                    </el-row>
                        <!--表单数据-->
                        <el-table :data="menulist" border style="width: 100%">
                            <el-table-column type="index" label="#" width="180">
                            </el-table-column>
                            <el-table-column prop="username" label="姓名" width="180">
                            </el-table-column>
                            <el-table-column prop="email" label="邮箱">
                            </el-table-column>
                            <el-table-column prop="mobile" label="电话">
                            </el-table-column>
                            <el-table-column prop="role_name" label="角色">
                            </el-table-column>
                            <el-table-column label="状态">
                                <template slot-scope="scope">
                                    <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#eee" @change="changeStatus(scope.row)">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200px">
                                <el-tooltip content="修改信息" placement="top" :enterable="false">
                                    <el-button type="primary" icon="el-icon-edit" circle></el-button>
                                </el-tooltip>
                                <el-tooltip content="删除信息" placement="top" :enterable="false">
                                    <el-button type="danger" icon="el-icon-delete" circle></el-button>
                                </el-tooltip>
                                <el-tooltip content="添加角色" placement="top" :enterable="false">
                                    <el-button type="info" icon="el-icon-user-solid" circle></el-button>
                                </el-tooltip>
                            </el-table-column>
                        </el-table>
                        <!--分页-->
                        <el-pagination :page-sizes="[2, 4, 6]" :page-size="2" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                        </el-pagination>
                </el-card>
                <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                    <span>这是一段信息</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </el-breadcrumb>
    </div>
</template>

<script>
export default {
    data () {
        return {
            queryInfo: {
              query: '',
              pagenum: 1,
              pagesize: 2
            },
            menulist: [],
            total: 0,
            dialogVisible: false
        }
    },
    created () {
        this.getMenuList()
    },
    methods: {
        async getMenuList () {
            const { data: res } = await this.$http.get('users', { params: this.queryInfo })
            this.menulist = res.data.users
            this.total = res.data.total
        },
        // 每页所显示条数
        handleSizeChange (val) {
            this.queryInfo.pagesize = val
            this.getMenuList()
        },
        // 第几页
        handleCurrentChange (val) {
            this.queryInfo.pagenum = val
            this.getMenuList()
        },
        // 修改状态
        async changeStatus (userInfo) {
            const { data: res } = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)
            if (res.meta.status !== 200) {
                userInfo.mg_state = !userInfo.mg_state
                return this.$message.error('用户状态更新失败')
            } else {
                this.$message.success('用户状态更新成功')
            }
        },
        handleClose (done) {
            this.$confirm('确认关闭？')
      }
    }
}
</script>

<style lang="less" scoped>
    .el-table {
        margin-top: 20px;
    }
    .card {
        margin-top: 25px;
    }
    .el-pagination {
        text-align: left;
        padding-top: 10px;
    }
</style>
